<template>
  <div id="app">
    <h3>父向子进行数据传递</h3>
    <ParentChildComp></ParentChildComp>
    <h3>子向父进行数据传递</h3>
    <ChildParentComp></ChildParentComp>
    <h3>非父子进行数据传递</h3>
    <OtherParent></OtherParent>
    <h3>事件总线</h3>
    <BusParent></BusParent>
    <h3>依赖注入</h3>
    <ProvideParent></ProvideParent>
    <h3>异步请求</h3>
    <AjaxData></AjaxData>
    <h3>Bind的sync修饰符实现双向操作</h3>
    <SyncParent></SyncParent>
    <h3>组件v-model</h3>
    <ModelParent></ModelParent>
  </div>
</template>

<script>
import ParentChildComp from "./components/ParentChild/ParentComp";
import ChildParentComp from "./components/ChildParent/ParentComp";
import OtherParent from "./components/OtherComp/OtherParent";
import BusParent from "./components/EventBus/BusParent";
import ProvideParent from "./components/Provide/ProvideParent";
import AjaxData from "./components/ajax/AjaxData";
import SyncParent from "./components/BindSync/SyncParent";
import ModelParent from "./components/CompModel/ModelParent";

export default {
  components: {
    ParentChildComp,
    ChildParentComp,
    OtherParent,
    BusParent,
    ProvideParent,
    AjaxData,
    SyncParent,
    ModelParent,
  },
  name: "App",
};
</script>

<style>
#app {
  margin-bottom: 1000px;
}
.box {
  margin: 20px;
  border: 1px solid black;
}
.note {
  white-space: pre-wrap;
  font-size: 14px;
  font-family: "楷体";
  color: brown;
}
</style>
